import { Tabs, useRouter } from 'expo-router';
import React from 'react';
import { Ionicons, FontAwesome5 } from '@expo/vector-icons';
import { View, TouchableOpacity, StyleSheet, GestureResponderEvent, Alert } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from '../context/ThemeContext';

// 自定义中间按钮组件
interface CustomTabBarButtonProps {
  children: React.ReactNode;
  onPress?: (e: GestureResponderEvent) => void;
  insetBottom: number;
}

function CustomTabBarButton({ children, onPress, insetBottom }: CustomTabBarButtonProps) {
  // 根据底部安全区域调整按钮位置
  const buttonOffset = insetBottom > 0 ? 20 - insetBottom / 5 : -14; // 将按钮下移一些
  return (
    <TouchableOpacity
      style={[styles.customButton, { top: buttonOffset }]}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <View style={styles.buttonInner}>
        {children}
      </View>
    </TouchableOpacity>
  );
}

export default function TabLayout() {
  // 使用路由导航
  const router = useRouter();
  
  // 使用自定义主题上下文
  const { isDarkMode } = useTheme();
  
  const activeColor = '#1677ff'; // 蓝色激活颜色
  const inactiveColor = isDarkMode ? '#AAAAAA' : '#999999'; // 根据主题调整非激活颜色
  const insets = useSafeAreaInsets(); // 获取安全区域的内边距

  // 处理添加按钮点击事件
  const handleAddButtonPress = () => {
    // 直接使用router导航，无需preventDefault
    router.push('/post/create');
  };

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: activeColor,
        tabBarInactiveTintColor: inactiveColor,
        headerShown: true,
        tabBarStyle: {
          height: 60 + insets.bottom, // 加上底部安全区域的高度
          paddingBottom: 5 + insets.bottom, // 底部内边距加上安全区域
          paddingTop: 5,
          backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF',
          borderTopWidth: 1,
          borderTopColor: isDarkMode ? '#333333' : '#EEEEEE',
        },
        tabBarLabelStyle: {
          fontSize: 12,
          marginTop: 0,
          paddingBottom: insets.bottom > 0 ? 5 : 0, // 如果有安全区域，增加标签底部内边距
          color: isDarkMode ? '#FFFFFF' : undefined, // 深色模式下标签文本为白色
        },
        tabBarItemStyle: {
          paddingBottom: insets.bottom > 0 ? insets.bottom - 15 : 0, // 调整图标位置
          marginTop: -9, // 将四个常规按钮向上移动
        },
        headerStyle: {
          backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF',
        },
        headerTintColor: isDarkMode ? '#FFFFFF' : '#333333',
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: '首页',
          tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="schedule"
        options={{
          title: '课表',
          tabBarIcon: ({ color, size }) => <FontAwesome5 name="calendar-alt" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="add"
        options={{
          title: '',
          tabBarButton: (props) => (
            <CustomTabBarButton 
              insetBottom={insets.bottom}
              onPress={handleAddButtonPress}
            >
              <Ionicons name="add" size={30} color="#FFFFFF" />
            </CustomTabBarButton>
          ),
        }}
        listeners={{
          tabPress: (e) => {
            // 阻止默认的tab导航行为
            e.preventDefault();
          }
        }}
      />
      <Tabs.Screen
        name="message"
        options={{
          title: '消息',
          tabBarIcon: ({ color, size }) => <Ionicons name="chatbubble" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: '我的',
          tabBarIcon: ({ color, size }) => <Ionicons name="person" size={size} color={color} />,
          headerShown: true,
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  customButton: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonInner: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#1677ff',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
    elevation: 5,
  }
});
